<template>
  <el-card class="ai-chart-gadget w-full h-full flex flex-col"
           shadow="never"
           v-loading="loading">

    <div class="ai-chart-gadget__header flex relative">
      <GadgetTitle :gadgetSetting="settings"
                   :widgetName="widgetName"></GadgetTitle>
      <MoreMenu :slicer='slicer'
                :gadgetId='id'
                :gadgetType='gadgetInfo.com'
                @updateQuery="query"
                :widgetName="widgetName"
                :businessType="gadgetInfo.businessType"
                :id="gadgetInfo.id"
                @showQueryModel="showQueryModel"
                @fullScreen="fullScreen" />
    </div>

    <div class="ai-chart-gadget__body flex-1 flex flex-col h-0">
      <Chart class="flex-1"
             :view="settings"
             :dataset="data" />
    </div>

    <div class="ai-chart-gadget__footer">
      <Lastupdatetime v-if="currentTime"
                      :currentTime="currentTime"
                      :linkedDatasetList="linkedDatasetList"
                      :errorStatus="errorStatus"
                      @updateQuery="query" />
    </div>

    <DrillThrough :gadgetId='id'
                  :pageId='pageId'
                  :slicer="slicer"
                  :queryId="queryId"
                  ref="drill-through"
                  :widgetName='widgetName' />
    <Model :showSetting="isSetting"
           @queryModelClosed="queryModelClosed"
           :selectFields="selectFields"
           :dataInfo="{
              businessId: pageId,
              gadgetId: id,
              gadgetType: 'AIChartGadget',
              gadgetSetting:settings
            }"
           :updateGadget="upgradeGadgetSetting" />
  </el-card>
</template>

<script>
import { omit } from 'lodash'
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
import mixinFormatViewModule from '@/mixins/format-gadget-view-module'

export default {
  name: 'AIChartGadget',
  components: {
    Chart: () => import('../ai/chart/gadget.vue'),
    Lastupdatetime: () => import('@/components/last-update-time/index.vue'),
    Model: () => import('@/components/gadget/query-model/query-model')
  },
  mixins: [mixinGadgetViewModule, mixinFormatViewModule],
  props: {
    dataInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      currentTime: null,
      loading: false,
      queryId: '',

      isSetting: false,
      settings: {},
      selectFields: [],
      widgetName: undefined,
      linkedDatasetList: [],
      data: [],
  
    }
  },

  created () {
    this.subscribeMessage('runReport', () => {
      this.query(this.refreshCount > 0 ? 'auto' : false)
      this.refreshCount = this.refreshCount + 1
    })
  },
  beforeDestroy () {

  },
  methods: {
    queryModelClosed () {
      this.isSetting = false
      this.query()
    },
    queryModelPreview () {
      this.query(true)
    },
    showQueryModel () {
      this.isSetting = true
    },

    async query () {
      try {
        if (e !== 'auto') {
          this.loading = true
        }
        let tempObj = this.returnReportLinkParam()
        if (tempObj['name'] && this.slicer['name'] && tempObj['name'] === this.slicer['name']) delete this.slicer['name']
        const params = {
          ...omit(this.slicer, 'id'),
          code: this.code,
          gadgettype: this.wgadgettype,
          widgetName: this.wName,
          pageId: this.pageId,
          gadgetId: this.id,
          type: this.filterType,
          slicer: { ...this.slicer },
          filter: this.getFilterStr()
        }
        const { data: response } = await this.$interface.reports.getReportDataInfo(params)
        this.verifyHasData(response)

        if (response.code !== 0) {
          throw response.msg
        }

        this.linkedDatasetList = response.datasetSync || []
        this.selectFields = response.selectFields || []
        this.data = response.data || []
        this.settings = response.config || {}
        this.widgetName = response.name || this.settings.headerTitle
      } catch (error) {
        this.isHasData = false
        this.data = []
        this.settings = {}
        this.taskFields = []
        if (error.response && error.response.status === 504) {
          this.errorStatus = '504'
          this.gadgetMessageBus.$emit(this.pageId + 'stopautorefresh')
        }
      } finally {
        this.currentTime = new Date()
        this.loading = false
        this.autoRefreshQuery(e)
        this.updateGadgetLoadingStatus(!this.loading)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ai-chart-gadget {
  ::v-deep .el-card__body {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 0;
  }

  &__header {
    padding: 6px 20px;
    border-bottom: 1px solid #eee;
  }
}
</style>